<template>
  <div class="container">
    <div class="header">
      <van-nav-bar title="农庄租赁" left-text="返回" right-text left-arrow @click-left="onClickLeft"/>
    </div>
    <van-pull-refresh v-model="isLoading" @refresh="onRefresh">
      <div class="serach_box">
        <div class="left">
          <img src="../assets/images/adress.png" alt>
          <span>{{positionText}}</span>
        </div>
        <div class="center">
          <van-search
            placeholder="搜索"
            v-model="searchValue"
            @search="searchMethod"
            @clear="clearSearch"
          />
        </div>
      </div>
      <div class="banner" @click="toJump">
        <img src="../assets/images/farmLeaseBanner.png" alt>
      </div>
      <div class="nav">
        <div class="item" @click="allSelect" :class="isShowAllMark?'mark':''">全部</div>
        <div class="item" @click="leaseTypeToggle" :class="isShowLeaseMark?'mark':''">
          <span>出租类型</span>
          <img :src="leaseIcon" alt>
        </div>
        <div class="item" @click="locationSearchToggle" :class="isShowLocationMark?'mark':''">
          <span>位置</span>
          <img :src="locationIcon" alt>
        </div>
        <div class="item" @click="sortingToggle" :class="isShowSortMark?'mark':''">
          <span>筛选</span>
          <img :src="sortIcon" alt>
        </div>
      </div>
      <div class="filterPop" v-if="isShowFilterPop">
        <div class="content">
          <div class="popList">
            <div class="leaseType" v-show="isShowLeaseType">
              <div
                v-for="(item,index) in leaseTypeList"
                :key="index"
                :class="{selectColor:item.selectColor}"
                @click="selectLeaseTypeMethod(item)"
              >{{item.name}}</div>
            </div>
            <div class="locationSearch" v-show="isShowLocationSearch">
              <div
                v-for="(item,index) in locationList"
                :key="index"
                :class="{selectColor:item.selectColor}"
                @click="selectPrivinceMethod(item)"
              >{{item.name}}</div>
            </div>
            <div class="sorting" v-show="isShowSorting">
              <div
                v-for="(item,index) in sortList"
                :key="index"
                :class="{selectColor:item.selectColor}"
                @click="selectItem(item)"
              >{{item.name}}</div>
            </div>
          </div>
          <div class="sure" @click="sureFilter">确定</div>
        </div>
      </div>

      <div class="tab">
        <div class="list" v-if="initData.list&&initData.list.length>0">
          <van-list v-model="loading" :finished="finished" finished-text="没有更多了" @load="onLoad">
            <ul>
              <li
                v-for="(item,index) in initData.list"
                :key="index"
                @click="toRentalDdetails(item.id)"
              >
                <div class="box_content">
                  <div class="left">
                    <img :src="item.image_url" alt>
                  </div>
                  <div class="right">
                    <div class="title">{{item.name}}</div>
                    <div
                      class="price"
                    >￥{{ Number(item.goods_format.rental_price*12).toFixed(2)||'0.00'}}/年</div>
                    <div class="info">
                      <div class="area">
                        整体面积：
                        <span>{{item.goods_format.all_area||'0'}}平米</span>
                      </div>
                      <div class="year">
                        土地年限：
                        <span>{{item.goods_format.land_age||'0'}}年</span>
                      </div>
                    </div>
                  </div>
                </div>
                <div class="box_footer">最新时间：{{item.create_time}}</div>
              </li>
            </ul>
          </van-list>
        </div>
        <div class="empty" v-else>暂无数据</div>
      </div>
    </van-pull-refresh>
    <!-- <van-tabbar v-model="active" active-color="#01bf47">
      <van-tabbar-item to="/farmLease">
        <span>农庄列表</span>
        <img slot="icon" slot-scope="props" :src="props.active ? icon.active1 : icon.normal1">
      </van-tabbar-item>
      <van-tabbar-item>
        <span>发布出租</span>
        <img slot="icon" slot-scope="props" :src="props.active ? icon.active2 : icon.normal2">
      </van-tabbar-item>
      <van-tabbar-item to="/myReward">
        <span>我的记录</span>
        <img slot="icon" slot-scope="props" :src="props.active ? icon.active3 : icon.normal3">
      </van-tabbar-item>
    </van-tabbar>-->
    <positionMap ref="pMap"></positionMap>
  </div>
</template>

<script>
import $province from "../common/province";
import positionMap from "../components/positionMap";
export default {
  name: "farmLease",
  components: {
    positionMap
  },
  data() {
    return {
      active: 0,
      icon: {
        normal1: require("../assets/images/zky_icon.png"),
        active1: require("../assets/images/zky_icon11.png"),
        normal2: require("../assets/images/zky_icon2.png"),
        active2: require("../assets/images/zky_icon22.png"),
        normal3: require("../assets/images/zky_icon3.png"),
        active3: require("../assets/images/zky_icon33.png")
      },
      tabIcon: {
        normal: require("../assets/images/arrow.png"),
        active: require("../assets/images/arrow2.png")
      },
      leaseIcon: require("../assets/images/arrow.png"),
      locationIcon: require("../assets/images/arrow.png"),
      sortIcon: require("../assets/images/arrow.png"),
      //定位省市区
      positionText: "",
      swipeNum: 6,
      lineHeight: 0,
      tabList: [],
      //搜索关键字
      searchValue: "",
      value: 4,
      initData: {},
      initDataList: [],
      typeId: "",
      //下拉刷新
      isLoading: false,
      //上拉加载
      loading: false,
      finished: false,
      pageNum: 1,
      //是否显示过滤弹窗
      isShowFilterPop: false,
      //是否显示出租类型弹窗内容
      isShowLeaseType: false,
      //是否显示位置搜索弹窗内容
      isShowLocationSearch: false,
      //是否显示智能排序弹窗内容
      isShowSorting: true,
      //智能排序列表
      sortList: [
        {
          name: "整体面积最大",
          selectColor: false,
          code: "max_all_area"
        },
        {
          name: "整体面积最小",
          selectColor: false,
          code: "min_all_area"
        },
        {
          name: "价格最低",
          selectColor: false,
          code: "max_all_area"
        },
        {
          name: "土地年限最长",
          selectColor: false,
          code: "max_land_age"
        },
        {
          name: "发布时间最新",
          selectColor: false,
          code: "max_create_time"
        }
      ],
      //出租类型列表
      leaseTypeList: [],
      //位置搜索列表
      locationList: [],
      //选中的出租类型
      leaseType: "",
      //选中的位置
      selectPrivince: "",
      //选中的智能排序类型
      sortType: "",
      //定位省份名字
      locationProvince: "",
      //定位城市名字
      locationCity: "",
      //定位区县名字
      locationDistrict: "",
      //定位省份编码
      locationProvince_code: "",
      //定位城市编码
      locationCity_code: "",
      //定位区县编码
      locationDistrict_code: "",
      positionAddress: {},
      province_code: "",
      city_code: "",
      district_code: "",
      // 全部按钮是否显示选中状态
      isShowAllMark: true,
      isShowLeaseMark: false,
      isShowLocationMark: false,
      isShowSortMark: false
    };
  },
  watch: {
    isShowFilterPop() {
      if (!this.isShowFilterPop) {
        this.move();
        this.leaseTypeList.forEach((item, index) => {
          item.selectColor = false;
        });
        this.locationList.forEach((item, index) => {
          item.selectColor = false;
        });
        this.sortList.forEach((item, index) => {
          item.selectColor = false;
        });
      } else {
        this.stop();
      }
    },
    //获取定位地址
    positionAddress() {
      if (this.positionAddress && this.positionAddress.addressComponent) {
        this.positionText = this.positionAddress.addressComponent.province;
        this.locationProvince = this.positionAddress.addressComponent.province;
        this.locationCity = this.positionAddress.addressComponent.city;
        this.locationDistrict = this.positionAddress.addressComponent.district;
        this.getInitData();
      }
    }
  },
  mounted() {
    console.warn("title:农庄租赁"); //andriod监听方法，勿删除
    this.getTabList();
    this.getLocationList();
  },
  methods: {
    // stop(event) {
    //   event.preventDefault();
    // },
    //返回
    onClickLeft() {
      // this.$toast("返回");
      console.warn("finish");
      window.webkit.messageHandlers.goBackApp.postMessage(null);
    },
    //搜索
    searchMethod() {
      this.getInitData();
    },
    //清除搜索
    clearSearch() {
      this.getInitData();
    },
    //跳转农场主页
    toRentalDdetails(id) {
      this.$router.push({
        path: "/rentalDdetails",
        query: {
          product_id: id
        }
      });
    },
    //tab切换
    tabChange(index, title) {
      if (this.tabList[index].id) {
        this.typeId = this.tabList[index].id;
      } else {
        this.typeId = "";
      }
      this.initDataList = [];
      this.pageNum = 1;
      this.getInitData();
    },
    //下拉刷新
    onRefresh() {
      this.initDataList = [];
      this.pageNum = 1;
      this.finished = false;
      this.getTabList();
      this.getInitData();
    },
    //上拉加载
    onLoad() {
      if (this.initData.list && this.initData.list.length > 0) {
        this.getInitData();
      }
    },
    //获取tab列表
    async getTabList() {
      let params = {};
      const res = await this.$axios.post(this.$api.leaseTypeList, params);
      if (res.success) {
        this.leaseTypeList = res.data;
        this.leaseTypeList.forEach((item, index) => {
          item.selectColor = false;
        });
        this.isLoading = false;
        this.loading = false;
      } else {
        this.leaseTypeList = [];
        this.$toast(res.msg);
      }
    },
    //获取列表数据
    async getInitData() {
      let params = {
        pageNum: this.pageNum,
        pageSize: 10,
        product_type_id: this.leaseType,
        keyWord: this.searchValue,
        province: this.selectPrivince||this.positionText,
        attr_name_select: this.sortType,
        language: ""
      };
      const res = await this.$axios.post(
        this.$api.searchFarmMoreCondition,
        params
      );
      if (res.success) {
        if (this.loading) {
          this.initDataList = this.initDataList.concat(res.data.list);
          this.initData = res.data;
          this.initData.list = this.initDataList;
          if (
            this.initDataList.length >= res.data.total ||
            this.initDataList.length == 0
          ) {
            this.finished = true;
          } else {
            this.pageNum++;
          }
        } else {
          this.initData = res.data;
          if (
            this.initData.list.length >= res.data.total ||
            !this.initDataList
          ) {
            this.finished = true;
          }
        }
        this.initData.list.forEach((item, index) => {
          if (item.goods_spec_format) {
            item.goods_format = JSON.parse(item.goods_spec_format)[0];
          }
          // if (item.goods_spec_format) {
          //   item.goods_format = JSON.parse(item.goods_spec_format);
          // }
          item.create_time = item.create_time.split(" ")[0];
        });
        console.log(this.initData);

        this.isLoading = false;
        this.loading = false;
      } else {
        this.initData = {};
        this.$toast(res.msg);
      }
    },
    //获取位置搜索信息
    getLocationList() {
      this.locationList = $province.province;
      this.locationList.forEach((item, index) => {
        item.selectColor = false;
      });
      // console.log(this.locationList);
    },
    //筛选切换
    allSelect() {
      this.isShowAllMark = true;
      this.isShowLeaseMark = false;
      this.isShowLocationMark = false;
      this.isShowSortMark = false;
      this.leaseIcon = this.tabIcon.normal;
      this.locationIcon = this.tabIcon.normal;
      this.sortIcon = this.tabIcon.normal;
      this.locationProvince_code = "";
      this.locationCity_code = "";
      this.locationDistrict_code = "";
      this.selectPrivince = "";
      this.sortType = "";
      this.leaseType = "";
      this.isShowFilterPop = false;
      this.getInitData();
    },
    leaseTypeToggle() {
      if (this.isShowFilterPop && this.isShowLeaseType) {
        this.isShowFilterPop = false;
        if (!this.selectPrivince && !this.sortType && !this.leaseType) {
          this.isShowAllMark = true;
          this.isShowLeaseMark = false;
          this.isShowLocationMark = false;
          this.isShowSortMark = false;
          this.leaseIcon = this.tabIcon.normal;
          this.locationIcon = this.tabIcon.normal;
          this.sortIcon = this.tabIcon.normal;
        } else {
          this.isShowAllMark = false;
        }
      } else {
        this.isShowFilterPop = true;
        this.isShowLeaseType = true;
        this.isShowLocationSearch = false;
        this.isShowSorting = false;
        this.isShowLeaseMark = true;
        this.isShowAllMark = false;
        this.isShowLocationMark = false;
        this.isShowSortMark = false;
        this.leaseIcon = this.tabIcon.active;
        this.locationIcon = this.tabIcon.normal;
        this.sortIcon = this.tabIcon.normal;
      }
    },
    locationSearchToggle() {
      if (this.isShowFilterPop && this.isShowLocationSearch) {
        this.isShowFilterPop = false;
        if (!this.selectPrivince && !this.sortType && !this.leaseType) {
          this.isShowAllMark = true;
          this.isShowLeaseMark = false;
          this.isShowLocationMark = false;
          this.isShowSortMark = false;
          this.leaseIcon = this.tabIcon.normal;
          this.locationIcon = this.tabIcon.normal;
          this.sortIcon = this.tabIcon.normal;
        }
      } else {
        this.isShowFilterPop = true;
        this.isShowLocationSearch = true;
        this.isShowLeaseType = false;
        this.isShowSorting = false;
        this.isShowLeaseMark = false;
        this.isShowAllMark = false;
        this.isShowLocationMark = true;
        this.isShowSortMark = false;
        this.leaseIcon = this.tabIcon.normal;
        this.locationIcon = this.tabIcon.active;
        this.sortIcon = this.tabIcon.normal;
      }
    },
    sortingToggle() {
      if (this.isShowFilterPop && this.isShowSorting) {
        this.isShowFilterPop = false;
        if (!this.selectPrivince && !this.sortType && !this.leaseType) {
          this.isShowAllMark = true;
          this.isShowLeaseMark = false;
          this.isShowLocationMark = false;
          this.isShowSortMark = false;
          this.leaseIcon = this.tabIcon.normal;
          this.locationIcon = this.tabIcon.normal;
          this.sortIcon = this.tabIcon.normal;
        }
      } else {
        this.isShowFilterPop = true;
        this.isShowSorting = true;
        this.isShowLeaseType = false;
        this.isShowLocationSearch = false;
        this.isShowLeaseMark = false;
        this.isShowAllMark = false;
        this.isShowLocationMark = false;
        this.isShowSortMark = true;
        this.leaseIcon = this.tabIcon.normal;
        this.locationIcon = this.tabIcon.normal;
        this.sortIcon = this.tabIcon.active;
      }
    },
    //智能排序选择
    selectItem(item) {
      this.sortList.forEach((item, index) => {
        item.selectColor = false;
      });
      item.selectColor = true;
    },
    //出租类型选择
    selectLeaseTypeMethod(item) {
      // console.log(this.leaseTypeList);
      this.leaseTypeList.forEach((item, index) => {
        item.selectColor = false;
      });
      item.selectColor = true;
      this.$forceUpdate();
    },
    //省份选择
    selectPrivinceMethod(item) {
      this.locationList.forEach((item, index) => {
        item.selectColor = false;
      });
      item.selectColor = true;
      this.$forceUpdate();
    },
    //确定筛选
    sureFilter() {
      this.isShowAllMark = false;
      this.initDataList = [];
      this.pageNum=1;
      this.finished = false;
      this.types = [];
      this.selectPrivince = "";
      this.leaseType = "";
      this.leaseTypeList.forEach((item, index) => {
        if (item.selectColor) {
          this.leaseType = item.code;
        }
      });
      this.locationList.forEach((item, index) => {
        if (item.selectColor) {
          this.selectPrivince = item.name;
        }
      });
      this.sortList.forEach((item, index) => {
        if (item.selectColor) {
          this.sortType = item.code;
        }
      });
      this.getInitData();
      this.isShowFilterPop = false;
    },
    toJump() {
      window.location.href = "ecologyentering://goTo";
    },
    /***滑动限制***/
    stop() {
      
      var mo = function(e) {
        e.preventDefault();
      };
      document.body.style.overflow = "hidden";
      // document.addEventListener("touchmove", mo, false); //禁止页面滑动
    },
    /***取消滑动限制***/
    move() {
      var mo = function(e) {
        e.preventDefault();
      };
      document.body.style.overflow = "auto"; //出现滚动条
      // document.removeEventListener("touchmove", mo, false);
    }
  }
};
</script>

<style scoped>
.empty {
  width: 100%;
  text-align: center;
  padding: 0.2rem;
  font-size: 0.14rem;
  color: #999999;
}
.selectColor {
  color: #00be46 !important;
}
.selectProject {
  color: #fff !important;
  background: #00be46 !important;
}
.nav {
  width: 100%;
  height: 0.4rem;
  background: #fff;
  display: flex;
  display: -webkit-flex;
  justify-content: space-around;
  align-items: center;
  position: relative;
  margin-top: 0.14rem;
}
.filterPop {
  position: absolute;
  top: 1.77rem;
  left: 0;
  width: 100%;
  height: calc(100vh - 2.45rem);
  background: rgba(0, 0, 0, 0.6);
  border-top: 1px solid #eeeeee;
  z-index: 1000000;
}
.filterPop .content {
  background: #fff;
  height: 1.87rem;
  padding-bottom: 0.45rem;
  position: relative;
}
.filterPop .content .popList {
  width: 100%;
  height: 100%;
  overflow-y: auto;
}
.filterPop .content .sure {
  position: absolute;
  background: #00be46;
  color: #fff;
  justify-content: center;
  align-items: center;
  width: 100%;
  height: 0.45rem;
  display: flex;
  display: -webkit-flex;
  font-size: 0.16rem;
}
.filterPop .project ul {
  width: 100%;
  display: flex;
  display: -webkit-flex;
  flex-wrap: wrap;
  padding-top: 0.08rem;
}
.filterPop .project ul li {
  width: 33.33%;
  display: flex;
  display: -webkit-flex;
  justify-content: center;
  align-items: center;
  padding: 0.08rem 0;
}
.filterPop .project ul li span {
  display: flex;
  display: -webkit-flex;
  background: #f5f5f5;
  width: 0.8rem;
  height: 0.3rem;
  justify-content: center;
  align-items: center;
  color: #808080;
  font-size: 0.14rem;
  border-radius: 0.03rem;
  -webkit-border-radius: 0.03rem;
}
.filterPop .leaseType,
.filterPop .sorting,
.filterPop .locationSearch {
  width: 100%;
}
.filterPop .leaseType > div,
.filterPop .sorting > div,
.filterPop .locationSearch > div {
  width: 100%;
  height: 0.4rem;
  display: flex;
  display: -webkit-flex;
  justify-content: center;
  align-items: center;
  color: #404040;
  font-size: 0.15rem;
}
.nav .item {
  display: flex;
  display: -webkit-flex;
  align-items: center;
  font-size: 0.15rem;
  color: #333333;
}
.nav .mark {
  color: #01bf47;
}
.nav .item img {
  width: 0.1rem;
}
.nav .item span {
  padding-right: 0.06rem;
}
.container {
  padding-top: 0.46rem;
  width: 100%;
  padding-bottom: 0.5rem;
}
.header {
  position: fixed;
  width: 100%;
  top: 0;
  left: 0;
  z-index: 100;
}
.serach_box {
  width: 100%;
  height: 0.3rem;
  display: flex;
  display: -webkit-flex;
  justify-content: flex-start;
  align-items: center;
  margin-top: 0.22rem;
  padding: 0 0.16rem;
}
.serach_box .left {
  display: flex;
  display: -webkit-flex;
  justify-content: flex-start;
  align-items: center;
  width: 20%;
}
.serach_box .left img {
  width: 0.13rem;
}
.serach_box .left span {
  font-size: 0.14rem;
  color: #000000;
  padding-left: 0.06rem;
}
.serach_box .center {
  width: 75%;
  height: 100%;
}
.van-search {
  padding: 0 0.14rem;
}
.banner {
  width: 100%;
  margin-top: 0.15rem;
  padding: 0 0.08rem;
}
.banner img {
  width: 100%;
}
.list {
  width: 100%;
  height: 100%;
  padding: 0 0.16rem;
  min-height: calc(100vh - 2.55rem);
}
.list li {
  width: 100%;
  background: #fff;
  border-radius: 0.1rem;
  -webkit-border-radius: 0.1rem;
  margin-top: 0.08rem;
  padding: 0 0.15rem;
}
.list .box_content {
  width: 100%;
  /* height: 1.56rem; */
  padding: 0.1rem 0;
  display: flex;
  display: -webkit-flex;
  justify-content: flex-start;
  align-items: center;
  border-bottom: 1px solid #f7f7f7;
}
.list .box_content .left {
  /* min-height: 1.05rem; */
  display: flex;
  -webkit-display: flex;
  justify-content: center;
  align-items: center;
}
.list .box_content .left img {
  width: 0.66rem;
  border-radius: 0.05rem;
  -webkit-border-radius: 0.05rem;
}
.list .box_content .right {
  padding-left: 0.15rem;
  width: calc(100% - 0.66rem);
}
.list .box_content .right .title {
  font-size: 0.15rem;
  color: #333333;
  margin-bottom: 0.06rem;
}
.list .box_content .right .price {
  color: #f44736;
}
.list .box_content .right .info {
  display: flex;
  -webkit-display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 0.12rem;
  width: 100%;
  color: #333333;
}
.list .box_content .right .info span {
  color: #f44736;
}
.box_footer {
  width: 100%;
  height: 0.34rem;
  display: flex;
  -webkit-display: flex;
  justify-content: flex-end;
  align-items: center;
  font-size: 0.12rem;
  color: #333333;
}
.box_footer span {
  color: #f44736;
  font-size: 0.16rem;
}
</style>


<style>
.van-tab--active {
  color: #01bf47;
}
.van-search .van-cell {
  border-radius: 50px;
  background: #e8e8e8;
}
</style>
